<template>
    <div class="aaa">
        <div class="aTop">
            <div class="title">Pop列表</div>
        </div>
        <div class="aBottom">
            <el-card class="box-card ecOne">
                <div class="bt">
                    <el-button @click="backFun" type="primary" size="mini">返回态势</el-button>
                </div>
                <div class="se">
                    <el-form ref="searchForm" :model="searchForm" size="mini" inline>
                        <el-row>
                            <el-col :span="5">
                                <el-form-item label="内置类型">
                                    <el-select v-model="searchForm.buildtype" filterable placeholder="请选择" clearable
                                        style="width: 90%">
                                        <el-option v-for="item in buildData" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="设施名">
                                    <el-select v-model="searchForm.facilityname" filterable placeholder="请选择" clearable
                                        style="width: 90%">
                                        <el-option v-for="item in facData" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="城市">
                                    <el-input v-model="searchForm.city" clearable placeholder="请输入"
                                        style="width: 100%"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-button @click="initPage" type="primary" size="mini">搜索</el-button>
                                <el-button size="mini" @click="reset">重置</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-card>

            <el-card>
                <div class="ta">
                    <el-table :data="tableData" stripe style="width: 100%" border size="mini">
                        <el-table-column label="序号" type="index" align="center">
                        </el-table-column>
                        <el-table-column prop="id" label="id" align="center">
                        </el-table-column>
                        <el-table-column prop="buildtype" label="内置类型" align="center">
                        </el-table-column>
                        <el-table-column prop="facilityname" label="设施名" align="center">
                        </el-table-column>
                        <el-table-column prop="city" label="城市" align="center">
                        </el-table-column>
                        <el-table-column prop="countryname" label="国家名称" align="center">
                        </el-table-column>
                        <el-table-column prop="latitude" label="纬度" align="center">
                        </el-table-column>
                        <el-table-column prop="longitude" label="经度" align="center">
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 分页条 -->
                <div class="block" style="text-align: right">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pageNo.current" :page-sizes="$NumberOfPages" :page-size="pageNo.size"
                        layout="total, sizes, prev, pager, next, jumper" :total="pageNo.total">
                    </el-pagination>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { popList, popBox } from "@/api/dataList";
export default {
    data() {
        return {
            buildData: [],
            facData: [],
            tableData: [],
            pageNo: {
                pageNum: 1, //当前页
                pageSize: 10, //每页的数量
                total: 1, // 总条目数
            },
            searchForm: {},
        };
    },
    mounted() {
        this.getTopData();
        this.initPage();
    },
    methods: {
        backFun() {
            this.$router.push({ path: "/index" });
        },

        getTopData() {
            popBox()
                .then((res) => {
                    if (res.code === 200) {
                        // console.log('@123', res);
                        res.data.buildTypeList.map(item => {
                            this.buildData.push({ value: item.buildtype, label: item.buildtype },)
                        })
                        res.data.facilityNameList.map(item => {
                            this.facData.push({ value: item.facilityname, label: item.facilityname },)
                        })
                    } else {
                        this.$message.error('获取下拉框数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },


        initPage() {
            const { pageSize, pageNum } = this.pageNo;
            let params = {
                pageSize,
                pageNum,
                ...this.searchForm
            };

            // console.log('param', params);

            popList(params)
                .then((res) => {
                    if (res.code === 200) {
                        // console.log('res', res);
                        this.tableData = res.data.list;
                        // console.log("this.tableData", this.tableData);
                        this.pageNo.total = res.data.total;
                    } else {
                        this.$message.error('获取数据失败!')
                    }
                })
                .catch((err) => {
                    console.log("err", err);
                });
        },

        // 重置
        reset() {
            this.searchForm = {}
            this.pageNo.pageNum = 1;
            this.initPage()
        },

        // 改变一页显示的条数
        handleSizeChange(pageSize) {
            this.pageNo.pageSize = pageSize
            this.initPage()
        },
        // 改变当前的页码
        handleCurrentChange(pageNum) {
            this.pageNo.pageNum = pageNum
            this.initPage()
        },
    },
};
</script>
<style lang="scss" scoped>
.aaa {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;

    .aTop {
        background-color: #020013;
        width: 100%;
        height: 80px;
        position: relative;

        .title {
            white-space: nowrap;
            position: absolute;
            left: 54px;
            top: 23px;
            width: 192px;
            height: 37px;
            display: flex;
            font-size: 28px;
            font-weight: 700;
            color: #FFFFFF;
        }
    }

    .aBottom {
        padding: 20px;

        .bt {
            margin-bottom: 20px;
        }

        ::v-deep .el-date-editor--daterange {
            width: 250px;
        }

        .ecOne {
            margin-bottom: 15px;
        }

        .ta {
            margin-bottom: 10px;
        }

        .block {
            width: 100%;
            text-align: right;
        }
    }
}
</style>